<template>
	<div class="newsinfo">
		<!-- 大标题 -->
		<h3 class="title">{{title}}</h3>
		<!-- 子标题 -->
		<p class="subtitle">
			<span>发表时间：{{date}}</span>
			<span>点击次数：{{click}}</span>
		</p>
		<hr />
		<!-- 详情内容 -->
		<div class="content"></div>
		<!-- 评论子组件 -->
		<comment-box :id="this.id"></comment-box>
	</div>
</template>

<script>
	import comment from '../subcomponents/Comment.vue'
	export default {
		data(){
			return {
				id:this.$route.params.id,
				title:"",
				date:"",
				click:""
			}
		},
		created(){
			this.getNewsInfoById();
		},
		methods:{
			getNewsInfoById(){
				var id = this.id;
				this.$http.get("../../data/newslist.json").then(function(data){
					var body = data.body;
					if(body.length>0){
						var arr = body;
						var data = arr.filter(function(item){
							return item.id == id;
						})
						this.title = data[0].title;
						this.date = data[0].pubdate;
						this.click = data[0].click;
					}else{
						
					}
					
				},function(err){
					console.log(err)
				})
			}
		},
		components:{
			'comment-box':comment
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.newsinfo{
		padding: 0px 5px;
		.title{
			font-size: 16px;
			font-weight: normal;
			text-align: center;
			color: red;
			margin: 10px auto;
		}
		.subtitle{
			font-size: 14px;
			color: #226aff;
			display: flex;
			justify-content: space-between;
		}
		.content{}
	}
</style>
